|
jquery实现div的隐藏和显示
$('#wsView')是要点击的按钮，$('#secondMenu')是要显示或隐藏的内容区域
查看
一、点击按钮显示隐藏
$(function () {
$("#wsView").click(function () {
if($('#secondMenu').is(':hidden')){
$("#secondMenu").show();
}else{
$("#secondMenu").hide();
}
});
})
二、点击空白处隐藏div
$(function () {
$('#wsView').click(function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$('#secondMenu').slideToggle('slow');
return false;
});
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
var _con = $('#wsView'); // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){
$('#secondMenu').slideUp('slow'); //滑动消失
//$('#secondMenu').hide(1000); //淡出消失
}
});
})
.hide() //隐藏 .show() //显示 .slideToggle（）//切换滑入和滑出 .slideDown() //滑出 .slideUp() //滑入 .fadeIn() //淡入 .fadeOut() //淡出 .fadeToggle() //切换淡入和淡出 以上的这些动画的方法,一般都可以使用两个参数,参数1:时间,参数2:回调函数 参数—时间:1000 毫秒—1秒 参数—时间:slow—慢,normal—正常,fast—快
|